<template>
	<view class="container">
		<nav-top :title="navTitle" :type="navType" />
		<nav-background :url="navBackgroundUrl" :imageHeight="navTopBackgroundImageHeight" />
		<view class="content">
			<view class="search-scan">
				<view @click="toSearch" class="search">
					<img class="search-img" src="@/static/images/home/search@2x.png" alt="">
					<input type="text" class="desc" placeholder="请输入店铺/菜品进行搜索" :value="searchContent" />
					<img class="search-button" src="@/static/images/home/searchButton@2x.png" alt="">
				</view>
				<img class="scan" src="@/static/images/home/scan@2x.png">
			</view>
			<!-- //组件未做 暂用图片代替 -->
			<img class="banner" src="@/static/images/home/homeBannerMain@2x.png">
			<view class="select-form">
				<view class="takeaway" @click="toTakeawayOrTakein('takeaway')" >
					<img class="takeaway-img" src="@/static/images/home/takeaway@2x.png" alt="">
					<img class="takeaway-word" src="@/static/images/home/takeawayWord@2x.png" alt="">
					<span class="desc">新鲜美食极速送到</span>
				</view>
				<view class="takein" @click="toTakeawayOrTakein('takein')">
					<img class="takein-img" src="@/static/images/home/takein@2x.png" alt="">
					<img class="takein-word" src="@/static/images/home/takeinWord@2x.png" alt="">
					<span class="desc">店内用餐/打包带走</span>
				</view>
			</view>
			<span class="long-list">为你推荐</span>
			<list-home :listData="listData" />
		</view>
	</view>
</template>


<script setup>
	import navBackgroundUrl from "@/static/images/home/homeTopBar@2x.png";
	import request from "@/Api/request.js"
	import {
		reactive,
		ref
	} from "vue";
	const navTitle = "西肆闹市"; 
	const navType = "home";
	const navTopBackgroundImageHeight = 524
	let listData = reactive([])
	const searchContent = ref("")
	request({
		url: "/shop/star",
		method: "GET"
	}).then((res) => {
		for (let i of res) {
			listData.push(i)
		}
	})

	function toSearch() {
		uni.navigateTo({
			url: '/pages/Home/Search/Search'
		})
	}

	//登陆函数
	// function toLogin() {
	// 	uni.navigateTo({
	// 		url: "/pages/Login/Login"
	// 	})
	// }
	function toTakeawayOrTakein(option){
		console.log(option);
		// if(option=='takein'){
		// 	uni.navigateTo({
		// 		url: `/pages/Home/TakeawayOrTakein/TakeawayOrTakein2?type=${option}`
		// 	})
		// }else{
			uni.navigateTo({
				url: `/pages/Home/TakeawayOrTakein/TakeawayOrTakein?type=${option}`
			})
		// }

	}

</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		background: linear-gradient(#fff, #f5f5f5);
		z-index: 9;
	}

	.content {
		display: flex;
		flex-direction: column;

		.search-scan {
			height: 96rpx;
			display: flex;
			gap: 28rpx;
			align-items: center;
			padding: 12rpx 0;

			.search {
				width: 606rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fff;
				border-radius: 36rpx;
				position: relative;

				.search-img {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					left: 32rpx;
				}

				.desc {
					width: 60%;
					color: #999;
					font-size: 26rpx;
					font-weight: 400;
					position: absolute;
					left: 80rpx;
				}

				.search-button {
					width: 122rpx;
					height: 64rpx;
					position: absolute;
					right: 4rpx;
				}
			}

			.scan {
				width: 56rpx;
				height: 56rpx;
			}
		}

		.banner {
			width: 100%;
			margin: 24rpx auto 48rpx;
			height: 280rpx;
		}

		.select-form {
			display: flex;
			gap: 26rpx;

			.takeaway,
			.takein {
				width: 336rpx;
				height: 360rpx;
				border-radius: 12px;
				background: #FFFFFF;
				box-shadow: 0px 2px 20px #ccc;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.desc {
					font-size: 26rpx;
					color: #B3B3B3;

				}
			}

			.takeaway {
				.takeaway-img {
					width: 256rpx;
					height: 210rpx;
				}

				.takeaway-word {
					width: 64rpx;
					height: 56rpx;
				}


			}

			.takein {
				.takein-img {
					width: 192rpx;
					height: 200rpx;
				}

				.takein-word {
					width: 164rpx;
					height: 56rpx;
				}
			}
		}

		.long-list {
			font-size: 36rpx;
			color: #333;
			margin: 48rpx 0 24rpx;
		}
	}
</style>